import React, { Component } from 'react'
import { Form, Input, Button, Card, message } from 'antd'
import styles from './index.less'
import { layout, tailLayout } from '../../common/layout'


import { manager } from '../../api/index'

export default class Login extends Component {
    state = {
        loading: false,
    }

    onFinish = async (values) => {
        this.setState({ loading: true })
        console.log(1111, values);
        const res = await manager.login(values);
        this.props.history.push('/home')//  /home/managerList
        console.log(2222, res);
        if (res.code === 200) {
            localStorage.account = values.account
            message.success("登录成功")
            this.props.history.push('/home')
        } else {
            message.error("用户名或密码错误")
        }
        this.setState({ loading: false })
    }

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo)
    }


    render() {
        const { loading } = this.state

        return (
            <div id='login' className={styles.bg} >
                <div className={styles.container}>
                    <Card hoverable>
                        <Form
                            {...layout}
                            name="loginForm"
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                        >
                            <Form.Item
                                label="用户名"
                                name="account"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名',
                                    },
                                ]}
                            >
                                <Input placeholder="请输入用户名" />
                            </Form.Item >

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码',
                                    },
                                ]}
                            >
                                <Input.Password placeholder="请输入密码" />
                            </Form.Item>

                            <Form.Item {...tailLayout}>
                                <Button type="primary" htmlType="submit" loading={loading}>登录</Button>
                            </Form.Item>

                        </Form>
                    </Card>
                </div>
            </div>
        )
    }
}
